<template>
    <u-popup :show="show" @close="show = false" mode="bottom" :round="10" :closeable="true">
        <view @touchmove.prevent.stop class="popup-common">
            <view class="title">商品修改:独立优惠丨独立欠款</view>
            <!-- <view class="commission-bg sidebar-margin my-[var(--top-m)] rounded-[var(--rounded-big)] py-[30rpx]">

                <view class="flex justify-around commission-content mb-[10rpx]">
                    <view class="flex flex-col items-center">
                        <text class="text-[30rpx] text-[var(--text-color-light9)]">订单金额(元)</text>
                        <text class="text-[#303133] price-font text-[38rpx] font-500 mt-[16rpx]">{{
                            fen2yuan(state.orderInfo.price.totalPrice
                            ) }}</text>
                    </view>
                    <view class="flex flex-col items-center">
                        <text class="text-[30rpx] text-[var(--text-color-light9)]">已付金额(元)</text>
                        <text class="text-[#303133] price-font text-[38rpx] font-500 mt-[16rpx]">{{
                            fen2yuan(state.orderInfo.price.paidPrice
                            ) }}</text>
                    </view>
                    <view class="flex flex-col items-center">
                        <text class="text-[30rpx] text-[var(--text-color-light9)]">待支付金额(元)</text>
                        <text class="text-[#303133] price-font text-[38rpx] font-500 mt-[16rpx]">{{
                            fen2yuan(state.orderInfo.price.payPrice
                            ) }}</text>
                    </view>
                </view>
                <up-line dashed></up-line>

                <view class="flex justify-around commission-content  mt-[10rpx]">
                    <view class="flex flex-col items-center">
                        <text class="text-[30rpx] text-[var(--text-color-light9)]">欠款金额(元)</text>
                        <text class="text-[#303133] price-font text-[38rpx] font-500 mt-[16rpx]">{{
                            fen2yuan(state.orderInfo.price.arrearsPrice
                            ) }}</text>
                    </view>
                    <view class="flex flex-col items-center">
                        <text class="text-[30rpx] text-[var(--text-color-light9)]">优惠金额(元)</text>
                        <text class="text-[#303133] price-font text-[38rpx] font-500 mt-[16rpx]">{{
                            fen2yuan(state.orderInfo.price.givePrice
                            ) }}</text>
                    </view>

                </view>

            </view> -->
            <scroll-view scroll-y="true" class="h-[70vh] pt-[20rpx]">

                <view v-for="(item, index) in state.paymentMap" :key="index"
                    class="flex items-center mx-[var(--popup-sidebar-m)] border-1 border-[#eee] border-solid rounded-[var(--rounded-mid)] px-[var(--pad-sidebar-m)] "
                    :class="{
                        'mb-[var(--top-m)]': true, 'text-[var(--primary-color)] !border-[var(--primary-color)]': item.payStatus
                    }" @click="selectPayMent(index)">
                    <view class="flex items-center w-[100%] py-[20rpx]">
                        <view class="w-[100rpx] h-[100rpx] rounded-[8rpx] relative">
                            <image :src="item.icon" class="w-[100rpx] h-[100rpx]"></image>

                        </view>
                        <view class="flex-1  flex items-center ml-[20rpx]   box-border py-[30rpx] border-0">
                            <view class="flex-1">
                                <view class="text-[32rpx] text-[#333] font-bold truncate max-w-[260rpx]">{{
                                    item?.classiNameShow }}

                                </view>

                            </view>
                            <view class=" w-[250rpx] flex text-[#303133] justify-end items-center">

                                <!-- <text class="text-[42rpx] ml-[10rpx] text-[var(--primary-color)]  price-font"
                                    v-if="item.payStatus">￥{{
                                        fen2yuan(item.paybalance)
                                    }}</text> -->

                            </view>

                        </view>
                    </view>

                </view>

                <view class="text-[var(--text-color-light6)] text-[32rpx] text-center"
                    v-if="state.paymentMap.length == 0">暂无支付方式</view>

            </scroll-view>
            <view class="btn-wrap">
                <!-- <button class="primary-btn-bg btn" @click="confirm">确认</button> -->

                <!-- <button class="!bg-[#ccc] btn" v-else>确认</button> -->
            </view>
        </view>
    </u-popup>
    <!-- 弹框 -->
    <cartitemPriceChangePopup ref="paymentPopupRef" @confirm="onSelectPaymentPay" />
</template>

<script setup lang="ts">
import { ref, watch, computed, reactive } from 'vue'

import cartitemPriceChangePopup from '../cartitem-price-change-popup/cartitem-price-change-popup.vue';
const props = defineProps({
    orderInfo: {
        type: Object,
        default: () => {
            return {

            }
        }
    }, //订单信息
    paymentMap: {
        type: Array,
        default: () => {
            return []
        }
    }
})


const state = reactive({
    orderInfo: computed(() => {
        return props.orderInfo
    }), // 支付单信息
    paymentMap: ref([
        {
            classiNameShow: '商品优惠',
            classify: 'change',
            icon: 'https://files.meton.vip/95cc57dc72eab0ad4a12d4accbf3c1899a1de4a53664fee2ad2020454fae2067.png',
            payStatus: false,
            paybalance: 0,
        },
        {
            classiNameShow: '商品欠款',
            classify: 'debt',
            icon: 'https://files.meton.vip/ee86d035d9fc4c89b97720e8d7f4c7d9f6195b359ac97e65fd9eb04f54901907.png',
            paybalance: 0,
            payStatus: false
        }
    ]), // 可选的支付方式
    payment: '', // 选中的支付方式
    payOrderList: [] as any, //当前支付方式的支付流水号
    activeName: '', //当前选中的支付方式
})


const show = ref(false)
const emits = defineEmits(['confirm', 'confirmOrder', 'success'])
/** 选择支付方式 */
const nowPayment = ref() //当前使用的资产
const nowPaymentIndex = ref<any>() //当前支付方式的下标
const paymentPopupRef = ref()
const selectedSku = ref({} as any)

const selectPayMent = async (index: any) => {
    nowPaymentIndex.value = index
    let item = state.paymentMap[index]
    if (item.classify == 'debt' && selectedSku.value.isArrears) {
        uni.showToast({
            title: '该商品不允许欠款',
            icon: 'none'
        })
        return
    }
    // if (!item.payStatus && state.orderInfo.price.payPrice == 0) {
    //     uni.showToast({
    //         title: '已完成支付,如需更改,请先取消已使用的支付方式',
    //         icon: 'none'
    //     })
    //     return

    // }
    nowPayment.value = item

    paymentPopupRef.value.open(selectedSku.value, nowPayment.value)

}





const open = (row: any) => {
    selectedSku.value = row
    const classify = props.paymentMap.filter((item: any) => {
        return item.classify == 'change' || item.classify == 'debt'
    }) as any
    console.log(classify)
    state.paymentMap = classify

    show.value = true
    let debtClassify = state.paymentMap.find((item: any) => {

        return item.classify == 'debt'
    })
    let updatePriceClassify = state.paymentMap.find((item: any) => {
        item.icon =
            'https://files.meton.vip/95cc57dc72eab0ad4a12d4accbf3c1899a1de4a53664fee2ad2020454fae2067.png'
        return item.classify == 'change'
    })
    if (debtClassify) {
        debtClassify.classiNameShow = '商品欠款'

        if (row.arrearsPrice > 0) {
            debtClassify.payStatus = true
        } else {
            debtClassify.payStatus = false
        }
    }
    if (updatePriceClassify) {
        updatePriceClassify.classiNameShow = '商品优惠'
        if (row.arrearsPrice > 0) {
            updatePriceClassify.payStatus = true
        } else {
            updatePriceClassify.payStatus = false
        }
    }



}

// 选择资产支付
const onSelectPaymentPay = async (item: any,) => {

    item.count = selectedSku.value.count
    emits('confirmOrder', item)





    // uni.hideLoading()

}
const handleUpdate = () => {

    emits('success')
}


const confirm = () => {
    show.value = false

}

defineExpose({
    open,
    confirm
})
</script>

<style lang="scss" scoped>
.popup-common .title {
    font-weight: 500;
    text-align: center;
    font-size: 1.125rem;
    padding-top: 1.125rem;
    line-height: 1;
    padding-bottom: 0;
}

.commission-bg {
    background: #f6f6f6;
}

.commission-content>view {
    position: relative;
    width: 6.5625rem
}

.commission-content>view:after {
    content: "";
    position: absolute;
    width: .0625rem;
    height: 1.875rem;
    background-color: var(--temp-bg);
    top: 50%;
    right: 0;
    transform: translateY(-50%)
}

.commission-content>view:last-of-type:after {
    width: 0;
    height: 0
}
</style>
